<template>
    <ul class="nav">
        <li v-for="(item, index) in navList" :key="index">
            <!-- <img :src="item.src" alt=""> -->
            <img :src="'/img/map' + (index + 1) + '.png'" alt="" />
            <router-link :to="'/detail/'+item" tag="div">
              {{ item }}
            </router-link>
        </li>
    </ul>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误
export default {
    data() {
        return {
            navList: [
                "分类查询",
                "物流查询",
                "购物车",
                "我的京东",
                "充值",
                "领券中心",
                "京东超市",
                "我的关注"
            ]
        };
    }
};
</script>

<style scoped>
.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin-left: 0;
    padding-left: 0;
}

li {
    width: 20vw;
    height: 20vw;
    list-style-type: none;
    border: 1px solid;
}

li img {
    width: 60%;
    height: 60%;
}
</style>
